<template>
  <div class="main">
    <div class="topImg">
      <!-- <img src="../../img/1.png" /> -->
      <img v-bind:src="itemA.default_img" />
    </div>
    <van-tabs
      v-model="active"
      line-width="30"
      color="#f9c05d"
      title-active-color="#000"
      title-inactive-color="#595959"
      @click="onClick"
    >
      <van-tab v-for="(item,index) in list" :key="index" :title="item.title" class="test-tab">
        <div class="intro" v-html="item.content"></div>
        <div class="phoneArea">
          <div class="tel">联系电话:</div>
          <div class="contact">{{item.contact}}</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import { Toast } from "vant";

export default {
  data() {
    return {
      active: 0, //index
      list: [], //数据列表
      itemA: "" //当前数据对象
    };
  },

  mounted() {},

  created() {
    let vm = this;
    vm.dataRequest();
  },

  methods: {
    dataRequest: function() {
      let vm = this;
      Toast.loading({
        message: "加载中..."
      });
      this.$api
        .getIntroList()
        .then(res => {
          // Toast('666')
          console.log(res);
          if (res.status == 1) {
            if (res.data.length > 0) {
              vm.list = res.data;
              vm.itemA = res.data[0];
            }
          }
          Toast.clear();
        })
        .catch(function(err) {
          console.log(err);
          Toast("网络错误");
        });
    },
    onClick(name, title) {
      // Toast(title);
      let vm = this;
      vm.itemA = vm.list[vm.active];
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  padding: 10px 10px;
  .topImg {
    height: 160px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 8px;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .van-tabs__line {
    background-color: #f9c05d;
  }
  /deep/ .van-tab--active {
    font-weight: bold;
    font-size: 18px;
  }

  .van-tab {
    font-size: 15px;
    line-height: 36px;
  }
  .intro {
    padding: 20px 20px;
    height: auto;
    // font-size: 28px;
    // font-family: PingFang SC;
    // font-weight: 400;
    // color: rgba(50, 50, 50, 1);
    // line-height: 48px;
  }
  .phoneArea {
    margin: 10px 20px;
    height: 25px;
    background: rgba(252, 249, 238, 1);
    // opacity: 0.3;
    display: flex;
    align-items: center;
    justify-content: center;
    .tel {
      height: 20px;
      padding-left: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #000;
      background: url(../.././img/intro/tel1.png) no-repeat left center / 15px
        15px;
    }
    .contact {
      color: #f9c05d;
      font-size: 12px;
      height: 20px;
      padding-left: 8px;
      line-height: 20px;
    }
  }
}
</style>